<template>
  <div class="box">
    <div class="search">
      <div class="search-left">
        <span>
          <slot name="title"></slot>
        </span>
        <el-input
          v-model="input"
          placeholder="请输入(模糊查询)"
        ></el-input>
      </div>
      <div class="search-right">
        <span class="demonstration">发布时间</span>
        <el-date-picker
          v-model="date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </div>
      <div class="btn">
        <el-button type="primary" icon="el-icon-search" @click="searchFun"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="resetFun"
          >重置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input:"",
      date: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    searchFun() {
      console.log("点击了搜索");
      this.$emit(
        'child-event',
        this.input,
        this.date[0],
        this.date[1]
      )
    },
    resetFun() {
      console.log("点击了重置");
      this.input = "",
      this.date = []
      this.$emit(
        'child-reset'
      )
    },
  },
};
</script>

<style scoped>
.search {
  padding: 20px 10px;
  background-color: white;
  border-radius: 4px;
  display: flex;
}
.search-left {
  display: flex;
  align-items: center;
}
.search-left .el-input {
  margin-left: 20px;
  width: 200px;
}
.search-right {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.search-right > span {
  margin-right: 20px;
}
.btn {
  display: flex;
  margin-left: 10px;
  align-items: center;
}
.btn > .el-button {
  width: 80px;
}
</style>